﻿// The tab view contains two containers: one for the tab headers and the other for the tab content
define([
    'Wjs/ui/widgets/foundation/ViewSingleContainer',
    'Wjs/ui/elements/mixins/HashContainer',
    'Wjs/ui/elements/mixins/Selectable',
    'Wjs/ui/elements/mixins/SelectorHolder',
    'Wjs/ui/elements/util/Selector'
],
function () {
    'use strict';

    var View = Wjs.getType('View'),
        HashContainer = Wjs.getType('HashContainer'),
        ViewSingleContainer = Wjs.getType('ViewSingleContainer'),
        MultipleContainer = Wjs.getType('MultipleContainer'),
        Selectable = Wjs.getType('Selectable'),
        SelectorHolder = Wjs.getType('SelectorHolder'),
        Selector = Wjs.getType('Selector'),
        TabViewHeader,
        TabViewBody,
        TabHeader, // Header of a single tab
        TabBody, // Body of a single tab
        TabView = Wjs.defineOnce({

            type: 'TabView',

            internal: {

                base: View,

                mixins: [
                    HashContainer
                ],

                onBeforeTypeDefined: function () {

                    TabViewHeader = Wjs.define({

                        type: 'TabViewHeader',

                        internal: {

                            base: View,

                            mixins: [
                                MultipleContainer,
                                SelectorHolder
                            ]
                        },

                        tag: 'ul',

                        'class': 'wjs-tab-view-header',

                        attributes: {
                            role: 'tablist'
                        },

                        selector: new Selector()
                    });

                    TabViewBody = Wjs.define({

                        type: 'TabViewBody',

                        internal: {

                            base: View,

                            mixins: [
                                MultipleContainer // In case of multiple columns, we need a container
                            ]
                        },

                        'class': 'wjs-tab-view-body'
                    });

                    TabHeader = Wjs.define({

                        type: 'TabHeader',

                        internal: {

                            base: ViewSingleContainer,

                            mixins: [
                                Selectable
                            ]
                        },

                        tag: 'li',

                        'class': 'wjs-tab-header',

                        attributes: {
                            role: 'tab'
                        },

                        events: {

                            click: function (evt) {
                                var tabView = this.up(function (parent) {
                                        return parent.type == 'TabView';
                                    }),
                                    el = this,
                                    index = Wjs.array.indexOf(tabView.tabs, function (t) { return t.header === el });

                                tabView.selectTab(index);
                            }
                        }

                    });

                    TabBody = Wjs.define({

                        type: 'TabBody',

                        internal: {

                            base: ViewSingleContainer,
                        },

                        'class': 'wjs-tab-body',

                        attributes: {
                            role: 'tabpanel'
                        },

                        hidden: true // Initially hidden
                    });
                },

                initialize: function (cfg, parent) {
                    var me = this;

                    cfg = cfg || {};

                    me.tabs = [];

                    if (cfg.tabs) {

                        cfg.tabs.forEach(function (tab) {
                            me.appendTab(tab);
                        });
                    }

                    me.selectedTab = cfg.selectedTab || 0; // Select the selected tab in the configuration or the first one

                    me.itemsRenderedHandler = function () {
                        me.selectTab(me.selectedTab);
                    };

                }
            },

            'class': 'wjs-tab-view',

            sections: {

                header: {
                    type: 'TabViewHeader'
                },

                body: {
                    type: 'TabViewBody'
                }
            },

        // The currently selected tab
        selected: 0,

        // Adds a tab to this view
        appendTab: function (tabConf) {
 
            // Store the created tab to allow to remove it if needed
            this.tabs.push({
                header: this.header.createChild(tabConf.header, this.defaultTabHeaderType || 'TabHeader'),
                body: this.body.createChild(tabConf.body, this.defaultTabBodyType || 'TabBody')
            });
        },

        // Selects the tab
        selectTab: function (index) {
            var me = this,
                tab;

            if (index < 0 || me.tabs.length <= index) {
                console.log('Warning - Out of bound index in select function');
                return;
            }

            if (!me.isRendered()) {
                me.selectedTab = index;
                return;
            }

            tab = me.tabs[index];

            if (tab === me.selectedTab) {
                return;
            }

            if (me.selectedTab) {
                me.selectedTab.header.deselect();
                me.selectedTab.body.hide();
            }

            me.selectedTab = tab;
            me.selectedTab.header.select();
            me.selectedTab.body.show();
        },

        // Removes a tab from this view suing the index
        removeTab: function (index) {
            var me = this,
                tab;

            if (index < 0 || me.tabs.length <= index) {

                console.log('Warning - Out of bound index in select function');
                return;
            }

            //            if (!me.dom) {
            //                me.selectedTab = index;
            //                return;
            //            }

            tab = me.tabs[index];

            me.header.removeChild(tab.header); // Remove the tab header from the header
            me.body.removeChild(tab.body); // Remove the tab content to the content

            Wjs.array.remove(me.tabs, function (t) { return t === tab; });
        },

        destroy: function () {
            delete this.tabs;

            TabView.base.destroy.call(this);
        }
    });

    return TabView;
});